<template>
	<!-- 血袋详情 -->
	<view class="blood-bag-detail">
        <view class="blood-bag-detail-form">
            <view class="form-block">
                <view class="form-block-item">送血人员：</view>
                <view class="form-block-item">签名：{{detail.takeUserName}}</view>
                <view class="form-block-item">时间：{{detail.takeTime}}</view>
            </view>
            <view class="form-block">
                <view class="form-block-item">收血人员：</view>
                <view class="form-block-item">签名：{{detail.fetchUserName}}</view>
                <view class="form-block-item">时间：{{detail.dtFetch}}</view>
            </view>
            <!-- <view class="form-block">
                <view class="form-block-item">输血前核对：</view>
                <view class="form-block-item">核对者1：暂无</view>
                <view class="form-block-item">核对者2：暂无</view>
                <view class="form-block-item">时间：暂无</view>
            </view> -->
            <view class="form-block">
                <view class="form-block-item">开始输血：</view>
                <view class="form-block-item">核对者1：{{detail.executoridName1}}</view>
                <view class="form-block-item">核对者2：{{detail.executoridName2}}</view>
                <view class="form-block-item">时间：{{detail.dtExecute}}</view>
            </view>
            <view class="form-block">
                <view class="form-block-item">开始输血15分钟：</view>
                <view class="form-block-item">签名：{{detail.naExecuteAfter}}</view>
                <view class="form-block-item">时间：{{detail.dtExecuteAfter}}</view>
            </view>
            <view class="form-block">
                <view class="form-block-item">输血结束：</view>
                <view class="form-block-item">签名：{{detail.naEnd}}</view>
                <view class="form-block-item">时间：{{detail.dtEnd}}</view>
            </view>
            <view class="form-block">
                <view class="form-block-item">输血结束后一小时：</view>
                <view class="form-block-item">签名：{{detail.userEndAfter}}</view>
                <view class="form-block-item">时间：{{detail.dtEndAfter}}</view>
            </view>
            <view class="form-block">
                <view class="form-block-item">血袋上交：</view>
                <view class="form-block-item">签名：{{detail.zdsjName}}</view>
                <view class="form-block-item">时间：{{detail.dtXdsj}}</view>
            </view>
        </view>
        <view class="blood-bag-detail-process">
            <view class="blood-bag-detail-process-item" v-for="(item,index) in detail.inSpecs" :key="index">
                <view class="process-item-title">
                    <view class="process-item-title-step">{{item.inspecTypeName}}</view>
                    <view class="process-item-title-time">{{item.inspecTime}}</view>
                </view>
                <view class="process-item-main">
                    <view class="process-item-main-item">
                        <view class="process-item-main-item-data">{{item.tw}}</view>
                        <view class="process-item-main-item-name">体温</view>
                    </view>
                    <view class="process-item-main-item">
                        <view class="process-item-main-item-data">{{item.mb}}</view>
                        <view class="process-item-main-item-name">脉搏</view>
                    </view>
                    <view class="process-item-main-item">
                        <view class="process-item-main-item-data">{{item.press}}</view>
                        <view class="process-item-main-item-name">血压</view>
                    </view>
                    <view class="process-item-main-item">
                        <view class="process-item-main-item-data">{{item.breathe}}</view>
                        <view class="process-item-main-item-name">呼吸</view>
                    </view>
                    <view class="process-item-main-item">
                        <view class="process-item-main-item-data">{{item.sp0}}</view>
                        <view class="process-item-main-item-name">血氧饱和度</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from "vuex"
import {
	getDateTimeString,
	getAdviceType,
	getPlanStatus,
    showToast,
} from "@/static/js/common.js"

export default {
	components: {},
	props: {
        detail: {
			type: Object,
			default: null,
		},
    },
	data() {
		return {
			visible: false, //弹窗显示
		}
	},
	watch: {},
	computed: {
		...mapState(["loginUser", "area"]),
	},
	beforeDestroy() {},
	mounted() {},
	methods: {
		
	},
}
</script>

<style lang="scss">
    .blood-bag-detail{
        border-top: 1px dashed #D5D6DB;
        margin: 0rpx 20rpx 20rpx 20rpx;
        .blood-bag-detail-form{
            background-color: #F9F9F9;
            padding: 20rpx 20rpx 0 20rpx;
            border-radius: 8rpx;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .form-block{
                width: calc(50% - 20rpx);
                color: #666666;
                font-size: 26rpx;
                margin: 0 0 20rpx 0;
                background-color: #efefef;
                padding: 10rpx;
                .form-block-item{
                    margin: 0rpx 0rpx 18rpx 0rpx;
                }
            }
        }
        .blood-bag-detail-process{
            background-color: #FFFFFF;
            padding: 0rpx 20rpx;
            margin-top: 20rpx;
            border-radius: 8rpx;
            .blood-bag-detail-process-item{
                padding: 20rpx 0rpx;
                .process-item-title{
                    display: flex;
                    margin-bottom: 20rpx;
                    align-items: center;
                    .process-item-title-step{
                        font-size: 28rpx;
                        color: #4088FE;
                    }
                    .process-item-title-time{
                        margin-left: auto;
                        font-size: 28rpx;
                        color: #262626
                    }
                }
                .process-item-main{
                    background-color: #F9F9F9;
                    display: flex;
                    .process-item-main-item{
                        width: 20%;
                        margin: 20rpx 0rpx;
                        .process-item-main-item-data{
                            text-align: center;
                            color: #4088FE;
                            font-size: 36rpx;
                            margin-bottom: 10rpx;
                            min-height: 54rpx;
                        }
                        .process-item-main-item-name{
                            color: #999999;
                            font-size: 24rpx;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
</style>
